<script lang="ts" setup>
// defineComponent({
//   name: 'EntTag'
// })

defineOptions({ name: 'EntTag' })

defineProps({
  content: {
    type: String,
    required: true
  },
  bgColor: {
    type: String,
    default: 'rgba(30, 144, 255, 1)'
  },
  textColor: {
    type: String,
    default: '#FFF'
  },
  size: {
    type: String,
    default: 'mini'
  }
})

</script>

<template>
  <div class="ent-tag">
    <span :style="{ backgroundColor: bgColor, color: textColor }" class="ent-tag-title">{{ content }}</span>
  </div>
</template>

<style scoped lang="scss">
.ent-tag {
  margin-right: 10px;
  padding: 0 4px 2px;
  border-radius: 6px;
  &-title {
    padding: 1px 8px 3px;
    border-radius: 4px;
    font-size: 12px;
  }
}
.ent-tag:last-child {
  margin-right: 0;
}
</style>
